<template>
  <div class="report-config-container">
    <div class="report-config-container-table">
      <el-table
        :data="tableData"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="columnName" label="字段列名"> </el-table-column>
        <el-table-column prop="columnComment" label="字段描述">
          <template slot-scope="scope">
            <el-input v-model="scope.row.columnComment"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="javaField" label="Java属性"> </el-table-column>
        <el-table-column label="列表" width="80">
          <template slot-scope="scope">
            <el-checkbox
              true-label="1"
              v-model="scope.row.isList"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="查询" width="80">
          <template slot-scope="scope">
            <el-checkbox
              true-label="1"
              v-model="scope.row.isQuery"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="查询方式">
          <template slot-scope="scope">
            <el-select v-model="scope.row.queryType">
              <el-option label="=" value="=" />
              <el-option label="!=" value="!=" />
              <el-option label=">" value=">" />
              <el-option label=">=" value=">=" />
              <el-option label="<" value="<" />
              <el-option label="<=" value="<=" />
              <el-option label="LIKE" value="LIKE" />
              <el-option label="BETWEEN" value="BETWEEN" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="显示类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.showType">
              <el-option label="文本框" value="el-input" />
              <el-option label="下拉框" value="el-select" />
              <el-option label="日期控件" value="el-date-picker" />
              <el-option label="时间控件" value="el-time-picker" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="defaultValue" label="默认值" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.defaultValue"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="其他">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              v-model="scope.row.optional"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    <div class="user-btn">-->
<!--      <el-button type="primary" @click="save">提交</el-button>-->
<!--      <el-button @click="cancel">取消</el-button>-->
<!--    </div>-->
  </div>
</template>
<script>
export default {
  name: "reportConfig",
  components: {},
  props:[
    'tableData'
  ],
  created() {},
  mounted() {},
  methods: {
    // 获取数据
    getData() {},
    // 保存
    save() {
      console.log(this.tableData);
    },
    // 取消
    cancel() {},
  },
  data() {
    return {
      // 表格数据
      // tableData: [
      //   {
      //     columnName: "字段列名",
      //     columnComment: "字段描述",
      //     javaField: "dataId", //java字段
      //     isList: "", //列表
      //     isQuery: "", //查询
      //     queryType: "=", //查询方式
      //     htmlType: "el-select", //显示类型
      //     optional: "字典类型",
      //   },
      // ],
    };
  },
};
</script>
<style lang="scss">
.report-config-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  flex-direction: column;
  &-table {
    flex: 1;
  }
  .user-btn {
    width: 98%;
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }
}
</style>
